<template>
  <div class="test-view">
    <el-row class="test-prop">
      <el-col :span="6" class="col-prop">
        <div>
          【题型】：<span v-if="questionDetail.questionType === '1'"
            >单选题</span
          >
          <span v-else-if="questionDetail.questionType === '2'">多选题</span>
          <span v-else>简答</span>
        </div>
        <div>【学科】：{{ questionDetail.subjectName }}</div>
      </el-col>
      <el-col :span="6" class="col-prop">
        <div>【编号】：{{ questionDetail.id }}</div>
        <div>【目录】：{{ questionDetail.directoryName }}</div>
      </el-col>
      <el-col :span="6" class="col-prop">
        <div>
          【难度】：<span v-if="questionDetail.difficulty === '1'">简单</span>
          <span v-else-if="questionDetail.difficulty === '2'">一般</span>
          <span v-else>困难</span>
        </div>
        <div>【方向】：{{ questionDetail.direction }}</div>
      </el-col>
      <el-col :span="6" class="col-prop">
        <div>【标签】：{{ questionDetail.tags }}</div>
      </el-col>
    </el-row>
    <el-row class="description-row">
      【题干】：
      <div v-html="questionDetail.question" class="description"></div>

      <div v-if="questionDetail.questionType === '1'" class="options">
        <div class="note">单选题 选项：（以下选中的选项为正确答案）</div>
        <el-radio-group :value="1">
          <el-radio
            :label="item.isRight"
            v-for="item in questionDetail.options"
            :key="item.id"
            >{{ item.title }}</el-radio
          >
        </el-radio-group>
      </div>
      <div v-else-if="questionDetail.questionType === '2'" class="options">
        <div class="note">多选题 选项：（以下选中的选项为正确答案）</div>
        <el-checkbox
          :value="item.isRight ? true : false"
          :name="item.questionsID + ''"
          v-for="item in questionDetail.options"
          :key="item.id"
          >{{ item.title }}</el-checkbox
        >
      </div>
    </el-row>
    <el-row class="video-view">
      【参考答案】：<el-button type="danger" @click="showVideo"
        >视频答案预览</el-button
      >
      <div v-if="isShowVideo" class="video-show">
        <video width="401" height="263" controls="controls" id="myVideo">
          <source :src="questionDetail.videoURL" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </div>
    </el-row>
    <el-row class="answer-analysis">
      【答案解析】：
      <div style="display: inline-block" v-html="questionDetail.answer"></div>
    </el-row>
    <el-row class="remarks">
      【题目备注】：{{ questionDetail.remarks }}
    </el-row>
  </div>
</template>

<script>
import { detail as getDetail } from "@/api/hmmm/questions.js";
export default {
  props: {
    id: {
      type: Number,
      require: true,
    },
  },
  data() {
    return {
      isShowVideo: false,
      questionDetail: {},
    };
  },
  created() {
    this.getQuertionDetails();
  },
  methods: {
    showVideo() {
      this.isShowVideo = true;
    },
    async getQuertionDetails() {
      try {
        const { data } = await getDetail({
          id: this.id,
        });
        console.log(data);
        this.questionDetail = data;
      } catch (err) {
        console.log(请求失败);
      }
    },
  },
};
</script>

<style scoped lang='less'>
.test-view {
  .col-prop {
    div:first-child {
      margin-top: 8px;
      margin-bottom: 22px;
    }
    div:last-child {
      margin-bottom: 18px;
    }
  }
  .test-prop {
    border-bottom: 1px solid rgb(154, 154, 154);
  }
  .description-row {
    border-bottom: 1px solid rgb(154, 154, 154);
    padding-top: 10px;
    padding-bottom: 18px;
    .description {
      color: blue;
    }
    .options div:first-child {
      margin-top: 17px;
    }
  }
  .video-view {
    border-bottom: 1px solid rgb(154, 154, 154);
    padding: 9px 0;
    .video-show {
      margin-top: 20px;
    }
  }
  .answer-analysis {
    border-bottom: 1px solid rgb(154, 154, 154);
    padding: 9px 0;
  }
  .remarks {
    padding: 9px 0;
  }
  .options {
    .note {
      margin: 0 !important;
    }
    .el-radio {
      display: block;
      margin-bottom: 20px;
    }
    .el-radio:first-child {
      margin-top: 17px;
    }
    .el-radio:last-child {
      margin-bottom: 0;
    }
    .el-checkbox {
      display: block;
      margin-bottom: 20px;
    }
    .el-checkbox:first-child {
      margin-top: 17px;
    }
    .el-checkbox:last-child {
      margin-bottom: 0;
    }
  }
}
</style>